<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>数据库设计文档生成</title>
    <script src="js/vue.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="css/element-ui/element-ui.css">
    <link rel="stylesheet" href="css/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="css/generator.css">
    <!-- 引入组件库 -->
    <script src="js/element-ui/element-ui.js"></script>
    <script src="js/axios.min.js"></script>
</head>
<body class="home-body">
<div id="doc" style="height: 100%">
    <el-container style="height: 100%">
        <el-header>
            <el-menu
                    :default-active="activeIndex"
                    class="el-menu-demo"
                    mode="horizontal"
                    @select="handleSelect"
                    background-color="#ffffff"
                    text-color="#8cc4fd"
                    active-text-color="#1989fa">
                <el-menu-item index="1">代码生成</el-menu-item>
                <el-menu-item index="2">文档生成</el-menu-item>
            </el-menu>
        </el-header>
        <el-main style="display: flex;align-items: flex-start;justify-content: center">
            <el-descriptions title="数据库设计文档生成" :column="1" size="mini" border class="search">
                <template slot="extra">
                    <div :style="{color: isSuccess?'#1ab81a':'#ff0114', fontWeight: 'bold'}">*{{msg}}*</div>
                </template>
                <el-descriptions-item style="display: flex;justify-content: space-between;">
                    <template slot="label">
                        <el-tag size="small">数据库类型：</el-tag>
                    </template>
                    <el-select v-model="dataSourceVo.dbType" size="small" @change="changeDbType">
                        <el-option
                                v-for="item in DbOptions"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                                :disabled="item.disabled">
                        </el-option>
                    </el-select>
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        <el-tag size="small">服务IP：</el-tag>
                    </template>
                    <el-input class="inpWidth" clearable size="mini" v-model="dataSourceVo.ip"></el-input>
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        <el-tag size="small">端口号：</el-tag>
                    </template>
                    <el-input class="inpWidth" clearable size="mini" v-model="dataSourceVo.port"></el-input>
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        <el-tag size="small">数据库名称：</el-tag>
                    </template>
                    <el-input class="inpWidth" clearable size="mini" v-model="dataSourceVo.database"></el-input>
                </el-descriptions-item>

                <el-descriptions-item>
                    <template slot="label">
                        <el-tag size="small">数据库用户名：</el-tag>
                    </template>
                    <el-input class="inpWidth" size="mini" v-model="dataSourceVo.username" clearable></el-input>
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        <el-tag size="small">数据库密码：</el-tag>
                    </template>
                    <div style="display: flex;justify-content: space-between;">
                        <el-input class="inpWidth" size="mini" v-model="dataSourceVo.password" clearable show-password></el-input>
                        <el-button :loading="isLoad" :disabled="!connectBtnEnabled" @click="generationDoc" size="mini"
                                   type="primary">
                            文档生成
                        </el-button>
                    </div>
                </el-descriptions-item>

            </el-descriptions>


        </el-main>
    </el-container>

</div>


<script>
    new Vue({
        el: "#doc",
        data() {
            return {
                activeIndex: '2',
                isSuccess: false,
                isLoad: false,
                search: '',
                DbOptions: [
                    {
                        value: 'postgresql',
                        label: 'postgresql',
                        disabled: false
                    },
                    {
                        value: 'mysql',
                        label: 'mysql',
                        disabled: false
                    }],
                responseResult: 'waiting',
                msg: '数据库文档待生成',
                connectBtnEnabled: true,
                dataSourceVo: {
                    username: "postgres",
                    password: "123456",
                    url: "",
                    ip: "127.0.0.1",
                    port: "5432",
                    database: "test",
                    dbType: "postgresql"
                }
            };
        },
        methods: {
            handleSelect(key, keyPath) {
                if (key == 1) {
                    window.open('index.html', '_self');
                }
            },
            changeDbType(value) {
                if (value) {
                    if ("postgresql" == value) {
                        this.dataSourceVo.ip = '127.0.0.1'
                        this.dataSourceVo.port = '5432'
                        this.dataSourceVo.username = ''
                        this.dataSourceVo.password = ''
                    } else {
                        this.dataSourceVo.ip = '127.0.0.1'
                        this.dataSourceVo.port = '3306'
                        this.dataSourceVo.username = ''
                        this.dataSourceVo.password = ''
                    }
                }
            },
            generationDoc() {
                this.tableData = [];
                this.msg = "数据库文档正在生产中>>>";
                this.isSuccess = false;
                this.isLoad = true;
                let _this = this;
                axios.post('/generationDoc', JSON.parse(JSON.stringify(this.dataSourceVo)), {
                    responseType: 'blob',
                    headers: {'Content-Type': 'application/json; application/octet-stream;charset=UTF-8'}
                }).then(function (response) {
                    _this.connectBtnEnabled = true;
                    _this.msg = "数据库文档生成完毕";
                    _this.isSuccess = true;
                    let fileName = response.headers['content-disposition'].split('=')[1];
                    if ('download' in document.createElement('a')) {
                        let alink = document.createElement("a");
                        const blob = new Blob([response.data], {type: "application/msword"})
                        alink.download = fileName
                        alink.style.display = "none"
                        alink.href = URL.createObjectURL(blob)
                        document.body.appendChild(alink)
                        alink.click()
                        URL.revokeObjectURL(alink.href)
                        document.body.removeChild(alink)
                    } else {
                        // ie10下载
                        navigator.msSaveOrOpenBlob(blob, downloadName)
                    }

                }).catch(function (error) {
                    _this.connectBtnEnabled = true;
                    _this.msg = "数据库文档生成失败";
                    _this.isSuccess = false;
                    _this.openMessage(_this.msg, error)
                }).finally(function () {
                    _this.isLoad = false;
                });

            },
            openMessage(msg, type) {
                this.$message({
                    showClose: true,
                    message: msg,
                    type: type
                });
            }
        }
    })
</script>
<style>
    .inpWidth {
        width: 210px;
    }
</style>
</body>
</html>